{% extends "BlogBundle::base.html.twig" %}

{% block pagestyles %}
    <link rel="stylesheet" href="/assets/css/fullcalendar.css" />
{% endblock %}

{% block pagecontent %}
<div class="page-content">
    <div class="page-header">
        <h1>
            管理中心
            <small>
                <i class="icon-double-angle-right"></i>
                 账号和活动管理
            </small>
        </h1>
    </div><!-- /.page-header -->

    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="row">
                <div class="col-sm-9">
                    <div class="space"></div>

                    <div id="calendar"></div>
                </div>

                <div class="col-sm-3">
                    <div class="widget-box transparent">
                        <div class="widget-header">
                            <h4>添加标签</h4>
                        </div>

                        <div class="widget-body">
                            <div class="widget-main no-padding">
                                <div id="external-events">
                                    <div class="external-event label-grey" data-class="label-grey">
                                        <i class="icon-move"></i>
                                        标签 1
                                    </div>

                                    <div class="external-event label-success" data-class="label-success">
                                        <i class="icon-move"></i>
                                        标签 2
                                    </div>

                                    <div class="external-event label-danger" data-class="label-danger">
                                        <i class="icon-move"></i>
                                        标签 3
                                    </div>

                                    <div class="external-event label-purple" data-class="label-purple">
                                        <i class="icon-move"></i>
                                        标签 4
                                    </div>

                                    <div class="external-event label-yellow" data-class="label-yellow">
                                        <i class="icon-move"></i>
                                        标签 5
                                    </div>

                                    <div class="external-event label-pink" data-class="label-pink">
                                        <i class="icon-move"></i>
                                        标签 6
                                    </div>

                                    <div class="external-event label-info" data-class="label-info">
                                        <i class="icon-move"></i>
                                        标签 7
                                    </div>

                                    <label>
                                        <input type="checkbox" class="ace ace-checkbox" id="drop-remove" />
                                        <span class="lbl"> 使用后删除</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- PAGE CONTENT ENDS -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</div><!-- /.page-content -->
{% endblock %}

{% block pagescripts %}
    <script src="/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/assets/js/fullcalendar.min.js"></script>
    <script src="/assets/js/bootbox.min.js"></script>
{% endblock %}

{% block inlinescripts %}
    <script type="text/javascript">
        jQuery(function($) {

            /* initialize the external events
             -----------------------------------------------------------------*/

            $('#external-events div.external-event').each(function() {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                };

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject);

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });

            });

            /* initialize the calendar
             -----------------------------------------------------------------*/

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();


            var calendar = $('#calendar').fullCalendar({
                buttonText: {
                    prev : '<i class="icon-chevron-left"></i>',
                    next : '<i class="icon-chevron-right"></i>',
                    today: '本月',
                    month: '月',
                    week : '周',
                    day  : '日'
                },
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                today: ["今天"],

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: "/admin/calendar?oper=fetch",
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar !!!
                drop: function(date, allDay) { // this function is called when something is dropped

                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = $(this).data('eventObject');
                    var $extraEventClass = $(this).attr('data-class');

                    //console.log(date);

                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);
                    console.log($extraEventClass);

                    // assign it the date that was reported
                    var start_ts = Math.round(date.getTime() / 1000);
                    var end_ts   = start_ts+ (allDay ? 86400 : 3600 * 2);
                    var ed       = new Date();
                    ed.setTime(end_ts);

                    copiedEventObject.start  = date;
                    copiedEventObject.end    = ed;
                    copiedEventObject.allDay = allDay;
                    if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];

                    // render the event on the calendar
                    // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)


                    $.ajax({
                        url : '/admin/calendar?oper=add',
                        data: {
                            title : copiedEventObject.title,
                            start : Math.round(date.getTime() / 1000),
                            end   : Math.round(date.getTime() / 1000) + 3600 *4,
                            allDay: allDay ? 1 : 0,
                            class : copiedEventObject['className'] ? copiedEventObject['className'][0] : ''
                        },
                        success : function() {
                            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

                            // is the "remove after drop" checkbox checked?
                            if ($('#drop-remove').is(':checked')) {
                                // if so, remove the element from the "Draggable Events" list
                                $(this).remove();
                            }
                        }
                    });
                }
                ,
                selectable: true,
                selectHelper: true,
                select: function(start, end, allDay) {
                    bootbox.prompt("新建标签:", function(title) {
                        if (title !== null) {
                            $.ajax({
                                url : '/admin/calendar?oper=add',
                                data: {
                                    title : title,
                                    start : Math.round(start.getTime() / 1000),
                                    end   : Math.round(end.getTime() / 1000),
                                    allDay: allDay ? 1 : 0
                                },
                                success : function () {
                                    calendar.fullCalendar('renderEvent',
                                            {
                                                title : title,
                                                start : start,
                                                end   : end,
                                                allDay: allDay ? 1 : 0
                                            },
                                            true // make the event "stick"
                                    )
                                }
                            });
                        }
                    });

                    calendar.fullCalendar('unselect');

                },
                eventClick: function(calEvent, jsEvent, view) {
                    var form = $("<form class='form-inline'><label>更改标签 &nbsp;</label></form>");
                    form.append("<input class='middle' autocomplete=off type=text value='" + calEvent.title + "' /> ");
                    form.append("<button type='submit' class='btn btn-sm btn-success'><i class='icon-ok'></i> 保存 </button>");

                    var div = bootbox.dialog({
                        message: form,
                        buttons: {
                            "delete" : {
                                "label"     : "<i class='icon-trash'></i> 删除标签",
                                "className" : "btn-sm btn-danger",
                                "callback"  : function() {
                                    $.ajax({
                                        url     : "/admin/calendar?oper=del",
                                        data    : {
                                            id     : calEvent.id
                                        },
                                        success : calendar.fullCalendar('removeEvents', function (ev) {
                                            return (ev._id == calEvent._id);
                                        })
                                    });
                                }
                            } ,
                            "close" : {
                                "label" : "<i class='icon-remove'></i> 关闭",
                                "className" : "btn-sm"
                            }
                        }

                    });
                    //console.log(calEvent);
                    form.on('submit', function() {
                        calEvent.title = form.find("input[type=text]").val();

                        if (calEvent.id!=null) {
                            $.ajax({
                                url    : "/admin/calendar?oper=edit",
                                data   : {
                                    id     : calEvent.id,
                                    title  : calEvent.title,
                                    start  : Math.round(calEvent.start.getTime()/1000),
                                    end    : Math.round(calEvent.end.getTime()/1000),
                                    allDay : calEvent.allDay ? 1 : 0
                                },
                                success: function () {
                                    calendar.fullCalendar('updateEvent', calEvent);
                                    div.modal("hide");
                                    return false;
                                }
                            });
                        }
                    });

                    //console.log(calEvent.id);
                    //console.log(jsEvent);
                    //console.log(view);

                    // change the border color just for fun
                    //$(this).css('border-color', 'red');

                }

            });


        })
    </script>
{% endblock %}
